<div class="po-page-header">
  <!-- Breadcrumb -->
  @if (breadcrumb && breadcrumb.items.length) {
    <div class="po-page-header-breadcrumb">
      <po-breadcrumb
        [p-favorite-service]="breadcrumb.favorite"
        [p-items]="breadcrumb.items"
        [p-params-service]="breadcrumb.params"
        [p-size]="size"
      >
      </po-breadcrumb>
    </div>
  }

  <div class="po-page-header-container">
    <!-- Titulo e SubTitulo-->
    @if (title || subtitle) {
      <div class="po-page-header-title-container">
        @if (title) {
          <h1 class="po-page-header-title">
            {{ title }}
          </h1>
        }
        @if (subtitle) {
          <div class="po-page-header-subtitle">
            {{ subtitle }}
          </div>
        }
      </div>
    }

    <!-- Operações -->
    <ng-content></ng-content>
  </div>
</div>
